<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 动画 demo</title>
</head>

<body>
    <div>
        <!-- <img src="./beisaier.svg" alt="" style="width: 300px;height:300px;">
        <svg xmlns=" http://www.w3.org/2000/svg">
            <!-- <path d="M10 10 C 20 20, 40 20, 50 10" stroke="3" fill="none" />
            <path d="M70 10 C 70 20, 120 20, 120 10" stroke="3" fill="none" />
            <path d="M130 10 C 120 20, 180 20, 170 10" stroke="3" fill="none" /> -->
        <!-- <path d="M10 60 C 20 80, 40 80, 50 60" stroke="3" fill="none" /> -->
        <!-- <path d="M70 60 C 70 80, 110 80, 110 60" stroke="3" fill="none" />
            <path d="M130 60 C 120 80, 180 80, 170 60" stroke="3" fill="none" />
            <path d="M10 110 C 20 140, 40 140, 50 110" stroke="3" fill="none" />
            <path d="M70 110 C 70 140, 110 140, 110 110" stroke="3" fill="none" />
            <path d="M130 110 C 120 140, 180 140, 170 110" stroke="3" fill="none" /> -->
        <!-- </svg> -->

        <!-- <svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
            <circle id="mycircle" cx="400" cy="300" r="50" />
        </svg>  -->

        <svg width="200" height="200">
            <!-- <path d="
              M 18,3
              L 46,3
              L 46,40
              L 61,40
              L 32,68
              L 3,40
              L 18,40
              Z
            "></path> -->
            <path d="M10 60 C 20 80, 40 80, 50 60" stroke="5" fill="pink" />
        </svg>
        <svg viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg" width='300px' height="300px">
            <rect width="10" height="10">
                <animate attributeName="rx" values="0;5;0" dur="10s" repeatCount="indefinite" />
            </rect>
        </svg>


        <svg viewBox="0 0 200 100" xmlns="http://www.w3.org/2000/svg" width='300px' height="300px">
            <path fill="none" stroke="lightgrey" d="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />

            <circle r="5" fill="red">
                <animateMotion dur="10s" repeatCount="indefinite"
                    path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" />
            </circle>
        </svg>
        <img src="./b2.svg" alt="">
        <img src="./b3.svg" alt="">
        <svg version="1.1" baseProfile="full" width="300" height="200" xmlns="http://www.w3.org/2000/svg">

            <rect width="100%" height="100%" fill="red" />

            <circle cx="150" cy="100" r="80" fill="green" />

            <text x="150" y="125" font-size="60" text-anchor="middle" fill="white">SVG</text>

        </svg>
        <svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5" />
            <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent"
                stroke-width="5" />

            <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5" />
            <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5" />

            <line x1="10" x2="50" y1="110" y2="150" stroke="orange" fill="transparent" stroke-width="5" />
            <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145" stroke="orange"
                fill="transparent" stroke-width="5" />

            <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180" stroke="green"
                fill="transparent" stroke-width="5" />

            <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5" />
            <!-- <path d="M 20 230 Q 40 205, 50 230 T 90230" /> -->
            <!-- <polygon points="50 160, 55 180, 70 180, 60 190, 65 205, 50 195, 35 205, 40 190, 30 180, 45 180" /> -->
        </svg>
        <svg width="200px" height="200px" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <path d="M10 10" />

            <!-- Points -->
            <circle cx="10" cy="10" r="2" fill="red" />

        </svg>

        <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">

            <path d="M10 10 H 90 V 90 H 10 L 10 10" />

            <!-- Points -->
            <circle cx="10" cy="10" r="2" fill="red" />
            <circle cx="90" cy="90" r="2" fill="red" />
            <circle cx="90" cy="10" r="2" fill="red" />
            <circle cx="10" cy="90" r="2" fill="red" />
            <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black" />
        </svg>
        <svg width="100px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black" />
        </svg>
        <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" />
            <!-- <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent" /> -->
        </svg>
        <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <!-- <path d="M10 80 Q 95 10 185 80" stroke="black" fill="transparent" /> -->
            <path d="M10 80 Q 95 10 180 80" stroke="black" fill="transparent" />

        </svg>
        <svg width="190px" height="160px" version="1.1" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent" />
        </svg>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <rect x="10" y="10" width="100" height="100" stroke="blue" fill="purple" fill-opacity="0.5"
                stroke-opacity="0.8" />
        </svg>
        <svg width="200" height="150" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <path d="M 10 75 Q 50 10 100 75 T 190 75" stroke="black" stroke-linecap="round" stroke-dasharray="5,10,5"
                fill="none" stroke-dashoffset='2000' />
            <path d="M 10 75 L 190 75" stroke="red" stroke-linecap="round" stroke-width="1" stroke-dasharray="5,5"
                fill="none" stroke-dashoffset='2000' />
        </svg>
        <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" version="1.1">
            <defs>
                <linearGradient id="Gradient1">
                    <stop offset="5%" stop-color="white" />
                    <stop offset="95%" stop-color="blue" />
                </linearGradient>
                <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
                    <stop offset="5%" stop-color="red" />
                    <stop offset="95%" stop-color="orange" />
                </linearGradient>

                <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
                    <rect x="0" y="0" width="50" height="50" fill="skyblue" />
                    <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)" />
                    <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5" />
                </pattern>

            </defs>

            <rect fill="url(#Pattern)" stroke="black" x="0" y="0" width="200" height="200" />
        </svg>
    </div>
</body>

</html>